@import "reset";
@function r($px) {
    @return $px/40*1rem;
}
@mixin img {
    img {
        overflow: hidden;
        position: absolute;
        width: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
 @keyframes qwe {
                    0% {
                        
                        transform: rotate(0deg) ;
                    }
                    25% {
                        
                        transform: rotate(45deg) ;
                    }
                    50% {
                         
                        transform:  rotate(0deg) ;
                    }
                    75% {
                        transform:  rotate(-45deg) ;
                    }
                    100% {
                        transform:  rotate(0deg) ;
                    }
                }
                @keyframes qwa {
                    0% {
                        
                        transform: translateY(10px) ;
                    }
                    25% {
                        
                        transform: translateY(15px) ;
                    }
                    50% {
                         
                        transform:  translateY(0px) ;
                    }
                    75% {
                        transform:  translateY(15px) ;
                    }
                    100% {
                        transform:  translateY(0px) ;
                    }
                }
    @keyframes qaz {
                    0% {
                        
                        transform: scale(1.2);
                    }
                    
                    100% {
                        transform: scale(0.7);
                    }
                }
html,body{
    height: 100%;
}
.web_two{
//  display: none;
    transform: scale(0);
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: absolute;
    background: url(../img/beijing.png) no-repeat 50% 50% / cover;
    top: 0;
    left: 0;
    z-index: 51;
    .cont{
        width: 96%;
        height: 97%;
        margin: 0 auto;
        position: relative;
        top: r(20);
        left: 0;
        .sou{
            width: r(156);
            height:r(156);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            z-index: 2;
            img{
                overflow: hidden;
                position: absolute;
                width: 100%;
                animation: qwe 0.5s infinite;
            }
        }
        .energy{
            width: r(502);
            height: r(142);
            overflow: hidden;
            position: relative;
            margin: 0 auto;
            border-radius: 20px;
            img{
                overflow: hidden;
                position: absolute;
                width: 100%;
                z-index: 66;
            }
            .ydbg{
                width: r(410);
                height: r(70);
                background: #80471a;
                position: absolute;
                top: 22%;
                left: 16%;
                overflow: hidden;
                border-radius: 15px;
              img{
                  width: 100%;
                  height: 100%;
                  transform: translateX(-90%);
//                transform:translateX(-50%);
                  z-index: 1;
              }
            }
        }
        .pz{
            width: r(380);
            height: r(619);
            position: relative;
            margin: 0 auto;
            overflow: hidden;
            img{
                overflow: hidden;
                position: absolute;
                width: 80%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .boom{
            width: r(182);
            height: r(130);
            position: absolute;
            bottom: r(25);
            left: 0;
            overflow: hidden;
            img{
                position: absolute;
                width: 100%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .yh{
            width: r(200);
            height: r(260);
            position: absolute;
            right: r(-60);
            top: 52%;
            z-index: 5;
            img{
                position: absolute;
                width: 100%;
                animation: qwa 0.5s infinite;
            }
        }
        .hyu{
            width: r(160);
            height: r(107);
            position: absolute;
            top: r(170);
            left: r(30);
            overflow: hidden;
           animation: qaz 1.3s infinite;
            img{
                position: absolute;
                width: 100%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .hyu_two{
            width: r(138);
            height: r(83);
            position: absolute;
            top: r(237);
            right: r(35);
            overflow: hidden;
           animation: qaz 1.3s infinite;
            img{
                position: absolute;
                width: 100%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .hyu_three{
            width: r(120);
            height: r(47);
            position: absolute;
            top: r(450);
            left: r(40);
            overflow: hidden;
            animation: qaz 1.3s infinite;
            img{
                position: absolute;
                width: 100%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .hyu_four{
            width: r(102);
            height: r(47);
            position: absolute;
            top: r(589);
            right: r(50);
            overflow: hidden;
            animation: qaz 1.3s infinite;
            img{
                position: absolute;
                width: 100%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}
.result_one{
    transform: scale(0);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/jg_one.png) no-repeat 40% 40% / cover;
    z-index: 51;
    .cont{
        width: 96%;
        height: 97%;
        margin: 0 auto;
        position: relative;
        top: r(20);
        left: 0;
        .sou{
            width: r(156);
            height:r(156);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            z-index: 2;
            img{
                overflow: hidden;
                position: absolute;
                width: 100%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .energy{
            width: r(502);
            height: r(142);
            overflow: hidden;
            position: relative;
            margin: 0 auto;
            border-radius: 20px;
            img{
                overflow: hidden;
                position: absolute;
                width: 100%;
                z-index: 66;
            }
            .ydbg{
                width: r(410);
                height: r(70);
                background: #80471a;
                position: absolute;
                top: 22%;
                left: 16%;
                overflow: hidden;
                border-radius: 15px;
              img{
                  width: 100%;
                  height: 100%;
                  transform: translateX(-90%);
//                transform:translateX(-50%);
                  z-index: 1;
              }
            }
        }
        .music{
            width: r(71);
            height: r(50);
            position: absolute;
            left: r(30);
            bottom: r(12);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .renovate{
            width: r(60);
            height: r(54);
            position: absolute;
            right: r(10);
            bottom: r(12);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .shuzi_one{
            width: r(100);
            height: r(148);
            z-index: 66;
            position: absolute;
            top: 0;
            left: r(160);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .shuzi_two{
            width: r(100);
            height: r(148);
            z-index: 66;
            position: absolute;
            top: 0;
            left: r(260);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .shuzi_three{
            width: r(100);
            height: r(148);
            z-index: 66;
            position: absolute;
            top: 0;
            left: r(360);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .bot{
            width: r(260);
            height: r(100);
            position: absolute;
            left: 50%;
            bottom: r(0);
            transform: translate(-50%,0);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            .diwen{
                width: r(230);
                height: r(60);
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
             img{
                width: 90%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            }
        }
    }
}

.result_two{
    transform: scale(0);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/jb_two.png) no-repeat 40% 40% / cover;
    z-index: 51;
    .cont{
        width: 96%;
        height: 97%;
        margin: 0 auto;
        position: relative;
        top: r(20);
        left: 0;
        .sou{
            width: r(156);
            height:r(156);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            z-index: 2;
            img{
                overflow: hidden;
                position: absolute;
                width: 100%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .energy{
            width: r(502);
            height: r(142);
            overflow: hidden;
            position: relative;
            margin: 0 auto;
            border-radius: 20px;
            img{
                overflow: hidden;
                position: absolute;
                width: 100%;
                z-index: 66;
            }
            .ydbg{
                width: r(410);
                height: r(70);
                background: #80471a;
                position: absolute;
                top: 22%;
                left: 16%;
                overflow: hidden;
                border-radius: 15px;
              img{
                  width: 100%;
                  height: 100%;
                  transform: translateX(-90%);
                  z-index: 1;
              }
            }
        }
        .music{
            width: r(71);
            height: r(50);
            position: absolute;
            left: r(30);
            bottom: r(12);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .renovate{
            width: r(60);
            height: r(54);
            position: absolute;
            right: r(10);
            bottom: r(12);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .shuzi_one{
            width: r(100);
            height: r(148);
            z-index: 66;
            position: absolute;
            top: 0;
            left: r(160);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .shuzi_two{
            width: r(100);
            height: r(148);
            z-index: 66;
            position: absolute;
            top: 0;
            left: r(260);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .shuzi_three{
            width: r(100);
            height: r(148);
            z-index: 66;
            position: absolute;
            top: 0;
            left: r(360);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .bot{
            width: r(260);
            height: r(100);
            position: absolute;
            left: 50%;
            bottom: r(0);
            transform: translate(-50%,0);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            .diwen{
                width: r(230);
                height: r(60);
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
             img{
                width: 90%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            }
        }
    }
}

.result_three{
    transform: scale(0);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/bj_thre.png) no-repeat 40% 40% / cover;
    z-index: 51;
    .cont{
        width: 96%;
        height: 97%;
        margin: 0 auto;
        position: relative;
        top: r(20);
        left: 0;
        .sou{
            width: r(156);
            height:r(156);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            z-index: 2;
            img{
                overflow: hidden;
                position: absolute;
                width: 100%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .energy{
            width: r(502);
            height: r(142);
            overflow: hidden;
            position: relative;
            margin: 0 auto;
            border-radius: 20px;
            img{
                overflow: hidden;
                position: absolute;
                width: 100%;
                z-index: 66;
            }
            .ydbg{
                width: r(410);
                height: r(70);
                background: #80471a;
                position: absolute;
                top: 22%;
                left: 16%;
                overflow: hidden;
                border-radius: 15px;
              img{
                  width: 100%;
                  height: 100%;
                  transform: translateX(-90%);
                  z-index: 1;
              }
            }
        }
        .music{
            width: r(71);
            height: r(50);
            position: absolute;
            left: r(30);
            bottom: r(12);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .renovate{
            width: r(60);
            height: r(54);
            position: absolute;
            right: r(10);
            bottom: r(12);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .shuzi_one{
            width: r(100);
            height: r(148);
            z-index: 66;
            position: absolute;
            top: 0;
            left: r(160);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .shuzi_two{
            width: r(100);
            height: r(148);
            z-index: 66;
            position: absolute;
            top: 0;
            left: r(260);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .shuzi_three{
            width: r(100);
            height: r(148);
            z-index: 66;
            position: absolute;
            top: 0;
            left: r(360);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .bot{
            width: r(260);
            height: r(100);
            position: absolute;
            left: 50%;
            bottom: r(0);
            transform: translate(-50%,0);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            .diwen2{
                width: r(230);
                height: r(60);
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
             img{
                width: 80%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            }
        }
    }
}

.result_four{
    transform: scale(0);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/bj_four.png) no-repeat 40% 40% / cover;
    z-index: 51;
    .cont{
        width: 96%;
        height: 97%;
        margin: 0 auto;
        position: relative;
        top: r(20);
        left: 0;
        .sou{
            width: r(156);
            height:r(156);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            overflow: hidden;
            z-index: 2;
            img{
                overflow: hidden;
                position: absolute;
                width: 100%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
        .energy{
            width: r(502);
            height: r(142);
            overflow: hidden;
            position: relative;
            margin: 0 auto;
            border-radius: 20px;
            img{
                overflow: hidden;
                position: absolute;
                width: 100%;
                z-index: 66;
            }
            .ydbg{
                width: r(410);
                height: r(70);
                background: #80471a;
                position: absolute;
                top: 22%;
                left: 16%;
                overflow: hidden;
                border-radius: 15px;
              img{
                  width: 100%;
                  height: 100%;
                  transform: translateX(-90%);
//                transform:translateX(-50%);
                  z-index: 1;
              }
            }
        }
        .music{
            width: r(71);
            height: r(50);
            position: absolute;
            left: r(30);
            bottom: r(12);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .renovate{
            width: r(60);
            height: r(54);
            position: absolute;
            right: r(10);
            bottom: r(12);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .shuzi_one{
            width: r(100);
            height: r(148);
            z-index: 66;
            position: absolute;
            top: 0;
            left: r(144);
            img{
                width: 90%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .shuzi_two{
            width: r(100);
            height: r(148);
            z-index: 66;
            position: absolute;
            top: 0;
            left: r(228);
            img{
                width: 90%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .shuzi_three{
            width: r(100);
            height: r(148);
            z-index: 66;
            position: absolute;
            top: 0;
            left: r(420);
            img{
                width: 90%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .shuzi_four{
            width: r(100);
            height: r(148);
            z-index: 66;
            position: absolute;
            top: 0;
            left: r(320);
            img{
                width: 90%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }
        .bot{
            width: r(260);
            height: r(100);
            position: absolute;
            left: 50%;
            bottom: r(0);
            transform: translate(-50%,0);
            img{
                width: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            .diwen2{
                width: r(230);
                height: r(60);
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
             img{
                width: 80%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            }
        }
    }
}